import React, { PureComponent } from 'react';
import { Popconfirm, Divider, Table, message } from 'antd';
import { connect } from 'dva';

@connect(({ dictValue, loading }) => ({
  list: dictValue.list,
  index: dictValue.index,
  loading: loading.effects['dictValue/fetch'],
}))
class DictValueList extends PureComponent {
  columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, record, index) => index + 1,
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '编码',
      dataIndex: 'code',
    },
    {
      title: '排序',
      dataIndex: 'sort',
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (text, record) => (
        <span>
          <a
            onClick={() => {
              this.handleEdit(record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <Popconfirm
            title="确认删除？"
            onConfirm={() => {
              this.handleRemove(record);
            }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  handleEdit = record => {
    const { onEdit } = this.props;
    if (onEdit) onEdit(record);
  };

  handleRemove = record => {
    const { dispatch, index } = this.props;
    dispatch({ type: 'dictValue/remove', payload: record.id }).then(() => {
      message.success('删除成功');
      dispatch({ type: 'dictValue/fetch', payload: { indexId: index.id } });
    });
  };

  render() {
    const { list, loading } = this.props;
    return (
      <Table
        rowKey="id"
        size="middle"
        columns={this.columns}
        loading={loading}
        dataSource={list}
        pagination={false}
      />
    );
  }
}

export default DictValueList;
